import { t } from 'i18next'
import React, { forwardRef, useState } from 'react'
import { StyledCardDetail } from '../style'
import { useRequest } from 'ahooks'
import { fetchEndMeeting, fetchMeetingDetail } from '@/api/myMeeting'
import { FetchRegularMeetings } from '@/api/myMeeting/interface'
import dayjs from '@/plugins/dayjs'
import { getPhone, weekList } from '../translate'
import { useGlobalStore } from '@/store/global'
import { fetchStatus } from '@/api/global'
import Alert, { confirmModal } from '@/components/Alert'
import DeleteMeetingDialog from './DeleteMeetingDialog'
import RegularMeetingDialog from './RegularMeetingDialog'
import { fetchRegularMeeting } from '../../../../api/meetingList'
export interface MeetingCardDetailProps {
	offsetX: number
	offsetY: number
	meetingMoid: string
	renderOrUnMountModal: (val: boolean) => void
}
const MeetingCardDetail = forwardRef((props: MeetingCardDetailProps, ref: any) => {
	const [isShowEndMeetingDialog, setIsShowEndMeetingDialog] = useState(false)
	const [isShowRegularMeetingDialog, setIsShowRegularMeetingDialog] = useState(false)
	const [ids, setIds] = useState<string[]>([])
	const [regularMeetingData, setRegularMeetingData] = useState<FetchRegularMeetings[]>([])
	const user = useGlobalStore((state) => state.user)
	const { offsetX, offsetY, meetingMoid, renderOrUnMountModal } = props
	const { data, loading } = useRequest(() => fetchMeetingDetail(meetingMoid), {
		refreshDeps: [meetingMoid],
	})
	const dateInfo =
		dayjs(data?.start_time).format(t('YYYY年MM月DD日')) +
		' ' +
		t('星期') +
		weekList[dayjs(data?.start_time).day()] +
		' ' +
		dayjs(data?.start_time).format('HH:mm') +
		' - ' +
		(data?.duration === 0 && data?.state !== 3 ? '' : dayjs(data?.end_time).format('HH:mm'))

	const mobileInfo = data
		? data.creator.mobile.length > 10
			? data?.creator.mobile.substring(0, 10) + '...'
			: data?.creator.mobile
		: ''
	const creatorInfo = data?.creator.name + getPhone(mobileInfo, '')
	const roomInfo = data && data.rooms.length > 0 ? data.rooms.map((r) => r.name).join(',') : t('未选择会议室')
	const attendPersonsInfo =
		data && data.members.length > 0
			? data.members
					.splice(0, 3)
					.map((m) => m.name)
					.join(',')
			: t('未添加参会人员')
	const brief = data?.brief ? (data.brief.length > 8 ? data.brief.slice(0, 8) + '...' : data.brief) : t('未填写内容')
	const canEdit =
		data &&
		(data.creator.account_type === 1 || data.creator.account_type === 5) &&
		user?.moid === data.creator.account &&
		data.state === 1
	const canDelete = canEdit || (!canEdit && dayjs().isBefore(data?.start_time))
	const toDetailPage = () => {
		window.location.href = `./detail.html?meetingMoid=${data?.meeting_moid}`
	}
	const handleEdit = () => {
		fetchStatus(() => {
			window.location.href = './create.html?meetingMoid=' + data?.meeting_moid
		})
	}
	const handleDelete = () => {
		if (data?.regular_meeting_moid) {
			fetchRegularMeeting(data.regular_meeting_moid).then((res) => {
				if (res.success) {
					setIsShowRegularMeetingDialog(true)
					res.data && setRegularMeetingData(res.data)
				} else {
					res.description && Alert(res.description)
				}
			})
		} else {
			setIsShowEndMeetingDialog(true)
			setIds([])
		}
	}
	const handleEnd = () => {
		confirmModal({
			msg: <div>{t('您确定要结束该会议吗？')}</div>,
			onOk: () => {
				fetchEndMeeting(meetingMoid, 1).then((res) => {
					if (res.success) {
						window.location.href = './index.html'
					} else {
						Alert(res.description ?? t('结束会议失败'))
					}
				})
			},
		})
	}
	const handelRegularOK = (arr: string[]) => {
		setIds(arr)
		setIsShowEndMeetingDialog(true)
	}
	return (
		<StyledCardDetail className="card-modal" ref={ref} top={offsetY - 30 + 'px'} left={offsetX - 30 + 'px'}>
			<div className="header">
				<div className="title">{data?.name}</div>
				<span
					className="close-icon"
					onClick={(e) => {
						e.stopPropagation()
						renderOrUnMountModal(false)
					}}
				></span>
			</div>
			<div className="content">
				{data && !loading ? (
					<div className="body">
						<div className="date">{dateInfo}</div>
						<div className="operates">
							{user?.moid === data.creator.account && (
								<>
									{canEdit && (
										<span className="btn edit" title={t('编辑')} onClick={handleEdit}></span>
									)}
									{canDelete && (
										<span className="btn delete" title={t('取消')} onClick={handleDelete}></span>
									)}
									{data.state === 2 && (
										<span className="btn endMeeting" title={t('结束')} onClick={handleEnd}></span>
									)}
								</>
							)}
							<span className="btn detail" title={t('详细')} onClick={toDetailPage}></span>
						</div>
						<div className="line creator">
							<span className="icon" title={t('发起人')}></span>
							<span className="text ellipsis">{creatorInfo}</span>
						</div>
						<div className="line room">
							<span className="icon" title={t('会议室')}></span>
							<span className="text ellipsis">{roomInfo}</span>
							{data.rooms.length > 3 && (
								<span className="more" title={t('更多')} onClick={toDetailPage}>
									{t('更多')}
								</span>
							)}
						</div>
						<div className="line members">
							<span className="icon" title={t('参会人员')}></span>
							<span className="text ellipsis">{attendPersonsInfo}</span>
							{data.members.length > 3 && (
								<span className="more" title={t('更多')} onClick={toDetailPage}>
									{t('更多')}
								</span>
							)}
						</div>
						<div className="line brief">
							<span className="icon" title={t('会议概要')}></span>
							<span className="text">{brief}</span>
							<span className="more" title={t('更多')} onClick={toDetailPage}>
								{t('更多')}
							</span>
						</div>
					</div>
				) : (
					<div className="loading">loading</div>
				)}
			</div>
			<RegularMeetingDialog
				data={regularMeetingData}
				meetingMoid={meetingMoid}
				isShow={isShowRegularMeetingDialog}
				setIsShow={setIsShowRegularMeetingDialog}
				OKCallBack={handelRegularOK}
			/>
			<DeleteMeetingDialog
				isShow={isShowEndMeetingDialog}
				setIsShow={setIsShowEndMeetingDialog}
				meetingMoid={meetingMoid}
				ids={ids}
			/>
		</StyledCardDetail>
	)
})
export default MeetingCardDetail
